<template>
    <div class="attendance">
        <el-tabs type="border-card"  v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="今日考勤" name="today">
                <el-row :gutter="20">
                    <el-col :span="24">
                        <div class="userList">
                            <el-row>
                                <el-col :span="24">
                                    <div>
                                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                                            <el-form-item>
                                                <el-select v-model="formInline.status" placeholder="时间段">
                                                    <el-option label="上午" value="0"></el-option>
                                                    <el-option label="下午" value="1"></el-option>
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item>
                                                <el-select v-model="formInline.status" placeholder="班级">
                                                    <el-option label="正常" value="0"></el-option>
                                                    <el-option label="停用" value="1"></el-option>
                                                </el-select>
                                            </el-form-item>
                                            <!-- <el-form-item>
                                                <el-button type="primary" icon="el-icon-search"
                                                    @click="searchUserList">搜索</el-button>
                                                <el-button icon="el-icon-refresh" @click="onReset">重置</el-button>
                                                <el-button type="text" @click="addUser">新增账号</el-button>
                                            </el-form-item> -->
                                        </el-form>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <div style="margin-top:20px;">
                                        <el-table :data="tableData" border height="350">
                                            <el-table-column type="selection" width="55">
                                            </el-table-column>
                                            <el-table-column prop="nickName" label="时间段" width="140" align="center">
                                            </el-table-column>
                                            <el-table-column prop="shClass.grade" label="班级名称" align="center" width="120">
                                                <template slot-scope="scope">
                                                    <span v-if="scope.row.shClass.grade == 1">一年级</span>
                                                    <span v-if="scope.row.shClass.grade == 2">二年级</span>
                                                    <span v-if="scope.row.shClass.grade == 3">三年级</span>
                                                    <span v-if="scope.row.shClass.grade == 4">四年级</span>
                                                    <span v-if="scope.row.shClass.grade == 5">五年级</span>
                                                    <span v-if="scope.row.shClass.grade == 6">六年级</span>
                                                    <span>( {{ scope.row.shClass.className }} )班</span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="genderTotalnumber" label="总人数" width="120" align="center">
                                            </el-table-column>
                                            <el-table-column prop="genderLacknumber" label="实到人数" width="120" align="center">
                                            </el-table-column>
                                            <el-table-column prop="genderRealnumber" label="缺勤人数" width="120" align="center">
                                            </el-table-column>
                                            <el-table-column prop="genderAttendance" label="出勤率" width="120" align="center">
                                            </el-table-column>
                                            <el-table-column align="center" label="操作" width="100">
                                                <template slot-scope="scope">
                                                    <el-button @click="toUpdateUser(scope.row)" type="text"
                                                        size="small">考勤详情</el-button>
                                                        <!-- <el-button @click="toUpdateUser(scope.row)" type="text"
                                                        size="small">考勤详情</el-button> -->
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                        <el-col :span="24">
                            <div class="grid-content bg-purple-dark">
                                <div class="block">
                                    <el-pagination
                                        @size-change="handleSizeChange"
                                        @current-change="handleCurrentChange"
                                        :current-page="pageNum"
                                        :page-sizes="[10, 20, 30, 50]"
                                        :page-size="pageSize"
                                        layout="total, sizes, prev, pager, next, jumper"
                                        :total="total">
                                    </el-pagination>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
            </el-tab-pane>
            <el-tab-pane label="缺勤统计" name="absence">缺勤统计
                <el-row>
                    <el-col :span="24">
                        <div>
                            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                                <el-form-item>
                                    <el-input v-model="formInline.userName" placeholder="请输入学生名称"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-select v-model="formInline.status" placeholder="时间段">
                                        <el-option label="正常" value="0"></el-option>
                                        <el-option label="停用" value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-select v-model="formInline.status" placeholder="班级">
                                        <el-option label="正常" value="0"></el-option>
                                        <el-option label="停用" value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                                <!-- <el-form-item>
                                    <el-button type="primary" icon="el-icon-search"
                                        @click="searchUserList">搜索</el-button>
                                    <el-button icon="el-icon-refresh" @click="onReset">重置</el-button>
                                    <el-button type="text" @click="addUser">新增账号</el-button>
                                </el-form-item> -->
                            </el-form>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                        <el-col :span="24">
                            <div style="margin-top:10px;">
                                <el-table :data="aaa" border height="350">
                                    <el-table-column prop="roleName" label="班级" width="200" align="center">
                                    </el-table-column>
                                    <el-table-column prop="roleName" label="姓名" width="200" align="center">
                                    </el-table-column>
                                    <el-table-column prop="roleName" label="病假次数" width="200" align="center">
                                    </el-table-column>
                                    <el-table-column prop="roleName" label="事假次数" width="200" align="center">
                                    </el-table-column>
                                    <el-table-column prop="roleName" label="旷课次数" width="200" align="center">
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-col>
                    </el-row>
            </el-tab-pane>
            <el-tab-pane label="历史考勤" name="history">历史考勤
                <el-row>
                        <el-col :span="24">
                            <div style="margin-top:10px;">
                                <el-table :data="tableData" border height="350">
                                    <el-table-column prop="shClass.grade" label="班级名称" align="center" width="120">
                                        <template slot-scope="scope">
                                            <span v-if="scope.row.shClass.grade == 1">一年级</span>
                                            <span v-if="scope.row.shClass.grade == 2">二年级</span>
                                            <span v-if="scope.row.shClass.grade == 3">三年级</span>
                                            <span v-if="scope.row.shClass.grade == 4">四年级</span>
                                            <span v-if="scope.row.shClass.grade == 5">五年级</span>
                                            <span v-if="scope.row.shClass.grade == 6">六年级</span>
                                            <span>( {{ scope.row.shClass.className }} )班</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="roleName" label="考勤天数" width="200" align="center">
                                    </el-table-column>
                                    <el-table-column prop="genderTotalnumber" label="总人数" width="200" align="center">
                                    </el-table-column>
                                    <el-table-column prop="genderRealnumber" label="实到人数" width="200" align="center">
                                    </el-table-column>
                                    <el-table-column prop="genderLacknumber" label="缺勤人数" width="200" align="center">
                                    </el-table-column>
                                    <el-table-column prop="genderAttendance" label="出勤率" width="200" align="center">
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-col>
                    </el-row>
            </el-tab-pane>
            <el-tab-pane label="请假管理" name="leave">请假管理
                <el-row>
                    <el-col :span="24">
                        <div>
                            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                                <el-form-item>
                                    <el-input v-model="formInline.userName" placeholder="请输入用户名称"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-select v-model="formInline.status" placeholder="请假类型">
                                        <el-option label="正常" value="0"></el-option>
                                        <el-option label="停用" value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-select v-model="formInline.status" placeholder="班级">
                                        <el-option label="正常" value="0"></el-option>
                                        <el-option label="停用" value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <!-- <el-button type="primary" icon="el-icon-search"
                                        @click="searchUserList">搜索</el-button>
                                    <el-button icon="el-icon-refresh" @click="onReset">重置</el-button>
                                    <el-button type="text" @click="addUser">新增账号</el-button> -->
                                    <el-button type="primary" icon="el-icon-search"
                                        >搜索</el-button>
                                    <el-button icon="el-icon-refresh">重置</el-button>
                                    <el-button type="text">新增账号</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                        <el-col :span="24">
                            <div style="margin-top:10px;">
                                <el-table :data="ask" border height="350">
                                    <el-table-column prop="shClass.grade" label="班级名称" align="center" width="120">
                                        <template slot-scope="scope">
                                            <span v-if="scope.row.shClass.grade == 1">一年级</span>
                                            <span v-if="scope.row.shClass.grade == 2">二年级</span>
                                            <span v-if="scope.row.shClass.grade == 3">三年级</span>
                                            <span v-if="scope.row.shClass.grade == 4">四年级</span>
                                            <span v-if="scope.row.shClass.grade == 5">五年级</span>
                                            <span v-if="scope.row.shClass.grade == 6">六年级</span>
                                            <span>( {{ scope.row.shClass.className }} )班</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="roleName" label="姓名" width="200" align="center">
                                    </el-table-column>
                                    <el-table-column prop="timeOn" label="开始时间" width="200" align="center">
                                    </el-table-column>
                                    <el-table-column prop="timeEnd" label="结束时间" width="200" align="center">
                                    </el-table-column>
                                    <el-table-column prop="askReaso" label="请假原因" width="200" align="center">
                                    </el-table-column>
                                    <el-table-column prop="askType" label="请假类型" width="200" align="center">
                                    </el-table-column>
                                    <el-table-column prop="departureStatus" label="离校状态" width="200" align="center">
                                    </el-table-column>
                                    <el-table-column align="center" label="操作" width="100">
                                        <template slot-scope="scope">
                                            <el-button @click="toUpdateUser(scope.row)" type="text"
                                                size="small">删除</el-button>
                                                <!-- <el-button @click="toUpdateUser(scope.row)" type="text"
                                                size="small">考勤详情</el-button> -->
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <div class="grid-content bg-purple-dark">
                                <div class="block">
                                    <el-pagination
                                        @size-change="handleSizeChange"
                                        @current-change="handleCurrentChange"
                                        :current-page="pageNum"
                                        :page-sizes="[10, 20, 30, 50]"
                                        :page-size="pageSize"
                                        layout="total, sizes, prev, pager, next, jumper"
                                        :total="total">
                                    </el-pagination>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
            </el-tab-pane>
            <el-tab-pane label="离校管理" name="leaving">离校管理
                <el-row>
                    <el-col :span="24">
                        <div>
                            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                                <el-form-item>
                                    <el-input v-model="formInline.userName" placeholder="请输入用户名称"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-select v-model="formInline.status" placeholder="时间段">
                                        <el-option label="上午" value="0"></el-option>
                                        <el-option label="下午" value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-select v-model="formInline.status" placeholder="离校状态">
                                        <el-option label="已确认离校" value="0"></el-option>
                                        <el-option label="未确认离校" value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                                <!-- <el-form-item>
                                    <el-button type="primary" icon="el-icon-search"
                                        @click="searchUserList">搜索</el-button>
                                    <el-button icon="el-icon-refresh" @click="onReset">重置</el-button>
                                    <el-button type="text" @click="addUser">新增账号</el-button>
                                </el-form-item> -->
                            </el-form>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                        <el-col :span="24">
                            <div style="margin-top:10px;">
                                <el-table :data="ask" border height="350">
                                    <el-table-column prop="shClass.grade" label="班级名称" align="center" width="120">
                                        <template slot-scope="scope">
                                            <span v-if="scope.row.shClass.grade == 1">一年级</span>
                                            <span v-if="scope.row.shClass.grade == 2">二年级</span>
                                            <span v-if="scope.row.shClass.grade == 3">三年级</span>
                                            <span v-if="scope.row.shClass.grade == 4">四年级</span>
                                            <span v-if="scope.row.shClass.grade == 5">五年级</span>
                                            <span v-if="scope.row.shClass.grade == 6">六年级</span>
                                            <span>( {{ scope.row.shClass.className }} )班</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="stId" label="姓名" width="200" align="center">
                                    </el-table-column>
                                    <el-table-column prop="timeOn" label="开始时间" width="200" align="center">
                                    </el-table-column>
                                    <el-table-column prop="timeEnd" label="结束时间" width="200" align="center">
                                    </el-table-column>
                                    <el-table-column prop="askReaso" label="请假原因" width="200" align="center">
                                    </el-table-column>
                                    <el-table-column prop="askType" label="请假类型" width="200" align="center">
                                    </el-table-column>
                                    <el-table-column prop="departureStatus" label="离校状态" width="200" align="center">
                                    </el-table-column>
                                    <el-table-column align="center" label="操作" width="100">
                                        <template slot-scope="scope">
                                            <el-button @click="toUpdateUser(scope.row)" type="text"
                                                size="small">删除</el-button>
                                                <!-- <el-button @click="toUpdateUser(scope.row)" type="text"
                                                size="small">考勤详情</el-button> -->
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <div class="grid-content bg-purple-dark">
                                <div class="block">
                                    <el-pagination
                                        @size-change="handleSizeChange"
                                        @current-change="handleCurrentChange"
                                        :current-page="pageNum"
                                        :page-sizes="[10, 20, 30, 50]"
                                        :page-size="pageSize"
                                        layout="total, sizes, prev, pager, next, jumper"
                                        :total="total">
                                    </el-pagination>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
            </el-tab-pane>
            <el-tab-pane label="考勤时间设置" name="setup">考勤时间设置
                <el-row>
                    <el-col :span="24">
                        <div>
                            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                                <el-form-item>
                                        <el-select v-model="formInline.status" placeholder="时间段">
                                            <el-option label="上午" value="1"></el-option>
                                            <el-option label="下午" value="2"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="创建时间">
                                        <el-date-picker
                                            v-model="daterange"
                                            type="daterange"
                                            range-separator="至"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期">
                                        </el-date-picker>
                                    </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" icon="el-icon-search"
                                        @click="findAttList">搜索</el-button>
                                    <!-- <el-button icon="el-icon-refresh" @click="onReset">重置</el-button> -->
                                    <el-button type="text" @click="add">添加时间段</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                        <el-col :span="24">
                            <div style="margin-top:10px;">
                                <el-table :data="att" border height="350">
                                    <el-table-column prop="slotTime" label="时间段" width="200" align="center">
                                        <template slot-scope="scope">
                                            <span v-show="scope.row.slotTime==1">上午</span>
                                            <span v-show="scope.row.slotTime==2">下午</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="timeOn" label="开始时间" width="200" align="center">
                                    </el-table-column>
                                    <el-table-column prop="timeEnd" label="结束时间" width="200" align="center">
                                    </el-table-column>
                                    <el-table-column align="center" label="操作" width="100">
                                        <template slot-scope="scope">
                                            <el-button @click="delAttend(scope.row)" type="text"
                                                size="small">删除</el-button>
                                                <el-button @click="updateAtt(scope.row)" type="text"
                                                size="small">编辑</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-col>
                    </el-row>
                    <el-dialog title="新增时间段" :visible.sync="dialogFormVisible">
                        <el-form :model="addSysUser">
                            <el-form-item label="时间段">
                                <el-select v-model="addSysUser.slotTime" placeholder="时间段">
                                    <el-option label="上午" value="1"></el-option>
                                    <el-option label="下午" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="addAtt">确 定</el-button>
                        </div>
                    </el-dialog>
                    <el-dialog title="修改时间段" :visible.sync="updialogFormVisible">
                        <el-form :model="upSysUser">
                            <el-form-item label="时间段">
                                <el-select v-model="upSysUser.slotTime" placeholder="时间段">
                                    <el-option label="上午" value="1"></el-option>
                                    <el-option label="下午" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="updialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="updateAttend">确 定</el-button>
                        </div>
                    </el-dialog>
            </el-tab-pane>
        </el-tabs>
    </div>
    
</template>
<script>

import axios from 'axios'

export default {
    name:"Attendance",
    data() {
        return{
            activeName: 'today',
            formInline: {
                userName: '',
                phonenumber: '',
                status: ''
            },
            // 时间
            daterange:[],
            tableData: [],
            pageNum : 1,
            pageSize: 10,
            total: 0,
            aaa:[],
            // 离校管理
            ask:[],
            // 时间段
            att:[],
            addSysUser: {
                slotTime:""
            },
            upSysUser:{
                slotTime:""
            },
            dialogFormVisible: false,
            updialogFormVisible: false,
        }
    },
    created() {
        this.searchUserList();
        // this.aaaa();
    },
    methods: {
        handleClick(tab){
            if(tab.name=="absence"){
                this.aaaa()
            }if(tab.name=="setup"){
                this.findAttList()
            }if(tab.name=="leaving"){
                this.findAskList()
            }if(tab.name=="history"){
                this.searchUserList()
            }
        },
        // 查询
        searchUserList() {
            axios.post("/api/manager/shcheck/pageShChenck?pageNum="+this.pageNum + "&pageSize=" + this.pageSize, this.formInline)
                .then((res) =>{
                    console.log(res)
                    this.tableData=res.data.data.items;
                    this.total = res.data.data.totalElements;
                })
        },
        toUpdateUser(){

        },
        aaaa(){
            axios.post("/api/manager/sysRole/findSysRoleList")
                .then((res) => {
                    console.log(res)
                    this.aaa = res.data.data;
                })
        },
        // 离校管理
        findAskList(){
            axios.post("/api/manager/shAsk/pageShAsk?pageNum="+this.pageNum + "&pageSize=" + this.pageSize, this.formInline)
                .then((res) =>{
                    console.log(res)
                    this.ask=res.data.data.items;
                    this.total = res.data.data.totalElements;
                })
        },
        // 考勤时间
        findAttList(){
            axios.post("/api/manager/attendanceTime/findList")
                .then((res)=>{
                    this.att = res.data.data
                })
        },
        delAttend(){
            axios.get("/api/manager/attendance/delAtt?id="+row.id)
            .then((res)=>{
                if(res.data.code == 200){
                    this.$message({
                        message: '恭喜你，' + res.data.message,
                        type: 'success'
                    });
                    this.findAttList();
                } else {
                    this.$message.error('错了哦，' + res.data.message);
                }
            })
        },
        updateAtt(){
            this.updialogFormVisible = true;
            axios.post("/api/manager/attendance/findAttById?id=" + row.id)
                    .then((res) => {
                        console.log(res)
                        this.upSysUser = res.data.data
                    })
        },
        updateAttend(){
            axios.post("/api/manager/attendance/update", this.upSysUser)
                .then((res) => {
                    if (res.data.code == 200) {
                        this.$message({
                            message: '恭喜你，' + res.data.message,
                            type: 'success'
                        });
                        this.updialogFormVisible = false;
                        this.findAttList();
                    } else {
                        this.$message.error('错了哦，' + res.data.message);
                    }
                })
        },
        add(){
            this.dialogFormVisible = true;
        },
        addAtt(){
            axios.post("/api/manager/attendance/addAtt", this.addSysUser)
                .then((res) => {
                    if (res.data.code == 200) {
                        this.$message({
                            message: '恭喜你，' + res.data.message,
                            type: 'success'
                        });
                        this.dialogFormVisible = false;
                        this.findAttList();
                    } else {
                        this.$message.error('错了哦，' + res.data.message);
                    }
                })
        },
         // 分页
         handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.searchUserList();
        },
        handleCurrentChange(val) {
            console.log(val);
            this.pageNum = val;
            this.searchUserList();
        },
    }
}
</script>